<!-- 通知公告 -->
<template>
    <div class="notice-list">
        <ul v-infinite-scroll="loadMore" :infinite-scroll-disabled="moreLoading" infinite-scroll-distance="150">
        	<li class="single_notice" v-if="isAllLoad" v-for="item in noticeData" :key="item.newsId"  @click="toApp('NoticeMngAct')">
        		<i class="iconfont icon-notice"></i>
        		<div class="title"><span>{{item.title}}</span></div>
        		<div class="time">时间：{{ item.time }}</div>
        	</li>
        	<!--底部判断是加载图标还是提示“全部加载”-->
            <div class="more_loading" v-show="!queryLoading && !noData">
                <mt-spinner type="snake" color="#ccc" :size="20" v-show=" moreLoading && !allLoaded">加载中</mt-spinner>
                <span v-show="allLoaded">已全部加载</span>
            </div>
            <div class="exam_list_box exam_nodata" v-if="noData && isAllLoad">
                <i class="iconfont icon-wushuju"></i>
                <span>暂无数据</span>
            </div>
        </ul> 
    </div>
</template>

<script>
import verify from '@/assets/js/verificationMixin'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'NoticeList',
  mixins:[verify],
  data () {
    return {
      phone:this.$route.query.phone,
      isAllLoad:false,
    	noticeData:[],
    	noticeData1:[],
		//下拉加载和 暂时没有的搜索
        pageNum           : 0,
        queryLoading      : false,
        moreLoading       : false,
        allLoaded         : false,
        totalNum          : 0,
        pageSize          : 5,
        noData            : false,
    }
  },
  computed: {
	...mapState(['userPhone']),
  },
  methods:{
  	...mapMutations([
    	'toApp'
    ]),
    //下拉加载
    loadMore() {
        if (this.allLoaded) {
            this.moreLoading = true;
            return;
        }
        if (this.queryLoading) {
            return;
        }
        this.moreLoading = !this.queryLoading;
        this.pageNum++;
        this.getNotice();
    },
  	//获取通知公告
    getNotice(){
    	let _self = this;
    	_self.$_get('sysmngajax/news!retListJson.action', { 
  			'page':_self.pageNum,
		    'rows':_self.pageSize,
        'userPhone':_self.phone,
  		})
  		.then(function(res) {
          let data = res;
    			if(_self.pageNum == 1){
              _self.noticeData = data.gridModel;
          }else{
               _self.noticeData = _self.noticeData.concat(data.gridModel);
          }
          if(data.records==_self.noticeData.length){
              _self.moreLoading = !_self.queryLoading;
              _self.allLoaded = true;
          }
          if(_self.pageNum==1 && _self.noticeData.length==0){
              _self.noData = true;
          }
          _self.isAllLoad = true;
          _self.$forceUpdate();
  		})
    }
  },
  mounted(){
    this.$_verifyConfig();
    dd.ready(function(){
        dd.biz.navigation.setTitle({
            title: ' ',//标题
            onSuccess : function(result) {},
            onFail : function() {}
        });
    }) 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	.notice-list{
		height:100%;
		overflow-y:auto;
		background:#f4f4f4;
		padding-bottom:80px;
		padding:20px 20px 80px;
		li.single_notice{
			width:100%;
			box-sizing: border-box;
			min-height:127px;
			background: #fff;
			border:1px solid #f4f4f4; /* no */
			padding-left:120px;
			padding-top:30px;
			padding-right:20px;
			padding-bottom:30px;
			position:relative;
			text-align: left;
			border-radius: 10px;
			margin-bottom:20px;
			box-shadow: 0 0 30px #ededed;
			i{
				position:absolute;
				height:100%;
				width:70px;
				height:70px;
				text-align: left;
				top:50px;left:28px;
				line-height:70px;
				text-align: center;
				background:#e9c639;
				color:#fff;
				font-size:40px;
				border-radius: 50%;
				box-shadow: 0 0 10px #ddd;
			}
			div.title{
				min-height:60px;
				line-height:40px;
				padding: 10px 0;
				font-size:28px; /* px */
				color:#333;
				font-weight:600;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			div.time{
				min-height:60px;
				line-height:60px;
				font-size:28px; /* px */
				color:#666;
			}
		}
	}
</style>
